import React, {useEffect, useState} from 'react'
import Header from '../components/Header'
import MainNav from '../components/MainNav'
import Footer from '../components/Footer'
import {reqPerson} from '../api/api'

export default function MusicList () {
  const [musicList,setmusicList] =useState([])
  useEffect(()=>{
   let  getlist = async ()=>{let result = await reqPerson({limit:12})
     setmusicList(result.data.result)
   }
    getlist()
  },[])
  console.log(musicList)
  return (
    <>
      <Header></Header>
      <MainNav></MainNav>
      <div className="top-main">
        <ul className="top-main-news">
          {
            musicList.map(item =>(
                <li key={item.id}>
                  <div className="news-a">
                    <img src={item.picUrl} alt="news" />
                    <div className="img-buttom">
                      <span className="img-buttom-l"></span>
                      <a className="img-buttom-r" hidefous="true"></a>
                    </div>
                  </div>
                  <p>
                    <a className="ft-u" hidefocus="true">{item.name}</a>
                  </p>
                </li>
            ))
          }
        </ul>
      </div>
      <Footer></Footer>
    </>

  )
}
